<div oc-lazy-load="['app/modules/button.js']">
    <div class="container button-usage" data-ng-controller="ButtonCtrl as ctrl">

        <div class="block-header">
            <h2>Buttons</h2>
        </div>

        <md-card>
            <md-card-header>
                <md-card-header-text>
                    <span class="md-title">Angularjs Material Buttons</span>
                </md-card-header-text>
                <md-menu>
                    <md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">
                        <i class="zmdi zmdi-more-vert f-20"></i>
                    </md-button>
                    <md-menu-content width="3">
                        <md-menu-item ng-repeat="item in ['Refresh','Config','Manager']">
                            <md-button>{{item}}</md-button>
                        </md-menu-item>
                    </md-menu-content>
                </md-menu>
            </md-card-header>
            <md-card-content>

                <div class="row">

                    <div class="col-md-12 m-b-30">
                        <p>Flat <br>
                            <small class="c-grey">Markup:
                                &lt;md-button&gt;title&lt;/md-button&gt;
                                &lt;md-button class=&quot;md-primary&quot;&gt;Primary &lt;/md-button&gt;
                            </small>
                        </p>
                        <md-button>{{title1}}</md-button>
                        <md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
                        <md-button ng-disabled="true" class="md-primary">Disabled</md-button>
                        <md-button class="md-warn">{{title4}}</md-button>
                        <md-button class="md-accent">Accent</md-button>
                    </div>
                    <div class="col-md-12 m-b-30">
                        <p>Raised<br>
                            <small class="c-grey">Markup: &lt;md-button
                                class="md-raised"&gt;Button&lt;/md-button&gt;</small>
                        </p>
                        <md-button class="md-raised">
                            <i class="zmdi zmdi-face"></i> Button
                        </md-button>
                        <md-button class="md-raised md-primary">Primary</md-button>
                        <md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
                        <md-button class="md-raised md-warn">Warn</md-button>
                        <md-button class="md-raised md-accent">Accent</md-button>
                    </div>
                    <div class="col-md-12 m-b-30">
                        <p>FAB<br>
                            <small class="c-grey">Markup:
                                &lt;md-button class=&quot;md-fab&quot; aria-label=&quot;Eat cake&quot;&gt;
                                &lt;md-icon&gt;&lt;i class=&quot;zmdi zmdi-face&quot;&gt;&lt;/i&gt;&lt;/md-icon&gt;
                                &lt;/md-button&gt;
                            </small>
                        </p>
                        <md-button class="md-fab" aria-label="Eat cake">
                            <i class="zmdi zmdi-face f-22"></i>
                        </md-button>
                        <md-button class="md-fab md-primary" aria-label="Use Android">
                            <i class="zmdi zmdi-face f-22"></i>
                        </md-button>
                        <md-button class="md-fab" ng-disabled="true" aria-label="Comment">
                            <i class="zmdi zmdi-face f-22"></i>
                        </md-button>
                        <md-button class="md-fab md-primary md-hue-2" aria-label="Profile">
                            <i class="zmdi zmdi-face f-22"></i>
                        </md-button>
                        <md-button class="md-fab md-mini" aria-label="Eat cake">
                            <i class="zmdi zmdi-face f-22"></i>
                        </md-button>
                        <md-button class="md-fab md-mini " aria-label="Use Android">
                            <i class="zmdi zmdi-face f-22"></i>
                        </md-button>
                    </div>
                    <div class="col-md-12 m-b-30">
                        <p>Link vs. Button <br>
                            <small class="c-grey">
                                Markup:
                                &lt;md-button class=&quot;md-primary&quot; ng-href=&quot;#&quot; target=&quot;_blank&quot;&gt;Primary
                                Link&lt;/md-button&gt;
                            </small>
                        </p>
                        <md-button ng-href="{{googleUrl}}" target="_blank">Default Link</md-button>
                        <md-button class="md-primary" ng-href="{{googleUrl}}" target="_blank">Primary Link</md-button>
                        <md-button>Default Button</md-button>
                    </div>
                    <div class="col-md-12 m-b-30">
                        <p>Themed <br>
                            <small class="c-grey">
                                Markup:
                                &lt;md-button class=&quot;md-primary md-hue-1&quot;&gt;Primary Hue 1&lt;/md-button&gt;
                            </small>
                        </p>
                        <md-button class="md-primary md-raised">Primary</md-button>
                        <md-button class="md-primary">Primary</md-button>
                        <md-button class="md-primary md-hue-1">Primary Hue 1</md-button>
                        <md-button class="md-warn md-raised">Warn</md-button>
                        <md-button class="md-warn">Warn</md-button>
                        <md-button class="md-warn md-raised md-hue-2">Warn Hue 2</md-button>
                        <md-button class="md-accent md-raised">Accent</md-button>
                        <md-button class="md-accent">Accent</md-button>
                        <md-button class="md-accent md-raised md-hue-1">Accent Hue 1</md-button>
                    </div>
                    <div class="col-md-12 m-b-30">
                        <p>Icon Button<br>
                            <small class="c-grey">
                                Markup:
                                &lt;md-button class=&quot;md-icon-button md-primary&quot; &gt;
                                &lt;md-icon&gt;&lt;i class=&quot;zmdi zmdi-menu&quot;&gt;&lt;/i&gt;&lt;/md-icon&gt;
                                &lt;/md-button&gt;
                            </small>
                        </p>
                        <md-button class="md-icon-button md-primary" aria-label="Settings">
                            <i class="zmdi zmdi-menu f-24"></i>
                        </md-button>
                        <md-button class="md-icon-button md-accent" aria-label="Favorite">
                            <i class="zmdi zmdi-favorite f-24"></i>
                        </md-button>
                        <md-button class="md-icon-button" aria-label="More">
                            <i class="zmdi zmdi-more f-24"></i>
                        </md-button>
                        <md-button href="http://google.com"
                                   title="Launch Google.com in new window"
                                   target="_blank"
                                   ng-disabled="true"
                                   aria-label="Google.com"
                                   class="md-icon-button launch">
                            <i class="zmdi zmdi-share f-24"></i>
                        </md-button>
                    </div>


                </div>


            </md-card-content>
        </md-card>

        <md-card class="m-t-30">
            <md-card-header>
                <md-card-header-text>
                    <span class="md-title">Bootstrap Buttons</span>
                </md-card-header-text>
                <md-menu>
                    <md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">
                        <i class="zmdi zmdi-more-vert f-20"></i>
                    </md-button>
                    <md-menu-content width="3">
                        <md-menu-item ng-repeat="item in ['Refresh','Config','Manager']">
                            <md-button>{{item}}</md-button>
                        </md-menu-item>
                    </md-menu-content>
                </md-menu>
            </md-card-header>
            <md-card-content>

                <div class="row">

                    <div class="col-md-12 m-b-30 bs-buttons">
                        <p>Bootstrap Buttons<br>
                            <small class="c-grey">
                                Markup:
                                &lt;button class=&quot;btn btn-default&quot; md-ink-ripple=&quot;#333&quot;&gt;Default&lt;/button&gt;
                            </small>
                        </p>
                        <button class="btn btn-default" md-ink-ripple="#333">Default</button>
                        <button class="btn btn-info" md-ink-ripple="#333">Info</button>
                        <button class="btn btn-primary" md-ink-ripple="#FFF">Primary</button>
                        <button class="btn btn-success " md-ink-ripple="#FFF">Success</button>
                        <button class="btn btn-warning " md-ink-ripple="#FFF">Warning</button>
                        <button class="btn btn-danger " md-ink-ripple="#FFF">Danger</button>
                        <button class="btn btn-default " md-ink-ripple="#000"><i class="zmdi zmdi-home"></i> Home
                        </button>
                        <a href="#" class="btn btn-primary  " md-ink-ripple="#FFF">A Primary link</a>
                        <a href="#" class="btn btn-default  " md-ink-ripple="#333">A Link</a>
                        <button class="btn btn-primary" type="button">
                            Messages <span class="badge">4</span>
                        </button>
                    </div>
                    <div class="col-md-12 m-b-30 bs-group">
                        <p>Bootstrap Button Dropdown<br>
                            <small class="c-grey">
                                Markup:
                                &lt;div class=&quot;btn-group&quot;&gt;
                                &lt;button type=&quot;button&quot; class=&quot;btn btn-primary dropdown-toggle&quot;
                                data-toggle=&quot;dropdown&quot; md-ink-ripple=&quot;#FFF&quot;
                                aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;Primary &lt;span
                                class=&quot;caret&quot;&gt;&lt;/span&gt;
                                &lt;/button&gt;
                                &lt;ul class=&quot;dropdown-menu&quot;&gt;
                                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                                &lt;li role=&quot;separator&quot; class=&quot;divider&quot;&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                                &lt;/ul&gt;
                                &lt;/div&gt;
                            </small>
                        </p>
                        <div class="btn-group">
                            <button md-ink-ripple="#333" type="button" class="btn btn-default dropdown-toggle"
                                    data-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false">Default <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- /btn-group -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
                                    md-ink-ripple="#FFF"
                                    aria-haspopup="true" aria-expanded="false">Primary <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- /btn-group -->
                        <div class="btn-group">
                            <button type="button" md-ink-ripple="#FFF" class="btn btn-success dropdown-toggle"
                                    data-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false">Success <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- /btn-group -->
                        <div class="btn-group">
                            <button type="button" md-ink-ripple="#FFF" class="btn btn-info dropdown-toggle"
                                    data-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false">Info <span class="caret"></span></button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- /btn-group -->
                        <div class="btn-group">
                            <button type="button" md-ink-ripple="#FFF" class="btn btn-warning dropdown-toggle"
                                    data-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false">Warning <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- /btn-group -->
                        <div class="btn-group">
                            <button type="button" md-ink-ripple="#FFF" class="btn btn-danger dropdown-toggle"
                                    data-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false">Danger <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- /btn-group -->
                        <div class="btn-group">
                            <button type="button" md-ink-ripple="#FFF" class="btn btn-primary">Primary</button>
                            <button type="button" md-ink-ripple="#FFF" class="btn btn-primary dropdown-toggle"
                                    data-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button type="button" md-ink-ripple="#FFF" class="btn btn-success">Success</button>
                            <button type="button" md-ink-ripple="#FFF" class="btn btn-success dropdown-toggle"
                                    data-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button type="button" md-ink-ripple="#FFF" class="btn btn-info">Info</button>
                            <button type="button" md-ink-ripple="#FFF" class="btn btn-info dropdown-toggle"
                                    data-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-warning">Warning</button>
                            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <div class="btn-group dropup">
                            <button type="button" md-ink-ripple="#FFF" class="btn btn-danger">Danger</button>
                            <button type="button" md-ink-ripple="#FFF" class="btn btn-danger dropdown-toggle"
                                    data-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-md-12 m-b-30">
                        <p>Bootstrap Button Group<br>
                            <small class="c-grey">
                                Markup:
                                &lt;div class=&quot;btn-group&quot;&gt;
                                &lt;button type=&quot;button&quot; md-ink-ripple=&quot;#fff&quot; class=&quot;btn
                                btn-primary&quot;&gt;Left&lt;/button&gt;
                                &lt;button type=&quot;button&quot; md-ink-ripple=&quot;#fff&quot; class=&quot;btn
                                btn-primary&quot;&gt;Middle&lt;/button&gt;
                                &lt;button type=&quot;button&quot; md-ink-ripple=&quot;#fff&quot; class=&quot;btn
                                btn-primary&quot;&gt;Right&lt;/button&gt;
                                &lt;/div&gt;
                            </small>
                        </p>
                        <div class="btn-group">
                            <button type="button" md-ink-ripple="#333" class="btn btn-default">Left</button>
                            <button type="button" md-ink-ripple="#333" class="btn btn-default">Middle</button>
                            <button type="button" md-ink-ripple="#333" class="btn btn-default">Right</button>
                        </div>
                        <div class="btn-group m-l-20">
                            <button type="button" md-ink-ripple="#fff" class="btn btn-primary">Left</button>
                            <button type="button" md-ink-ripple="#fff" class="btn btn-primary">Middle</button>
                            <button type="button" md-ink-ripple="#fff" class="btn btn-primary">Right</button>
                        </div>
                        <div class="btn-group m-l-20" role="group" aria-label="...">
                            <button type="button" md-ink-ripple="#000" class="btn btn-default">1</button>
                            <button type="button" md-ink-ripple="#000" class="btn btn-default">2</button>
                            <div class="btn-group" role="group">
                                <button type="button" md-ink-ripple="#000" class="btn btn-default dropdown-toggle"
                                        data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">
                                    Dropdown
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Dropdown link</a></li>
                                    <li><a href="#">Dropdown link</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>


                    <div class="col-md-12 m-b-30">
                        <p>Bootstrap Checkbox / Radio<br>
                            <small class="c-grey">
                                Markup:
                                &lt;div class=&quot;btn-group&quot; data-toggle=&quot;buttons&quot;&gt;
                                &lt;label class=&quot;btn btn-default active&quot; md-ink-ripple=&quot;#333&quot;&gt;
                                &lt;input type=&quot;checkbox&quot; autocomplete=&quot;off&quot; checked&gt; Checkbox 1
                                (pre-checked)
                                &lt;/label&gt;
                                &lt;label class=&quot;btn btn-default&quot; md-ink-ripple=&quot;#333&quot;&gt;
                                &lt;input type=&quot;checkbox&quot; autocomplete=&quot;off&quot;&gt; Checkbox 2
                                &lt;/label&gt;
                                &lt;label class=&quot;btn btn-default&quot; md-ink-ripple=&quot;#333&quot;&gt;
                                &lt;input type=&quot;checkbox&quot; autocomplete=&quot;off&quot;&gt; Checkbox 3
                                &lt;/label&gt;
                                &lt;/div&gt;
                            </small>
                        </p>

                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn btn-default active" md-ink-ripple="#333">
                                <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
                            </label>
                            <label class="btn btn-default" md-ink-ripple="#333">
                                <input type="checkbox" autocomplete="off"> Checkbox 2
                            </label>
                            <label class="btn btn-default" md-ink-ripple="#333">
                                <input type="checkbox" autocomplete="off"> Checkbox 3
                            </label>
                        </div>
                        <div class="btn-group m-l-20" data-toggle="buttons">
                            <label class="btn btn-primary active" md-ink-ripple="#FFF">
                                <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1
                                (preselected)
                            </label>
                            <label class="btn btn-primary" md-ink-ripple="#FFF">
                                <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
                            </label>
                            <label class="btn btn-primary" md-ink-ripple="#FFF">
                                <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
                            </label>
                        </div>
                    </div>


                </div>


            </md-card-content>
        </md-card>

    </div>
</div>
